<template>
  <div :class="{'English':languageData.id=='English'}">
    <el-dialog
      title="蓝马用户注册协议"
      :visible.sync="dialogVisible"
      width="700px"
    >
      <div class="recev" style="height: 500px;overflow-y:scroll;text-align: left">
        <div>
          <p> 本协议由您与深圳市蓝湾物流网络科技有限公司共同缔结，本协议具有合同效力。</p>
          <p> 本协议中协议双方合称协议方，深圳市蓝湾物流网络科技有限公司在协议中亦称为“订舱公司”。本协议中“蓝马”指由深圳市蓝湾物流网络科技有限公司运营的网络交易平台，域名为www.lanma56.com。</p>
        </div>
        <div class="card">
          <label> 一、协议内容及签署</label>
          <p>
            1．本协议内容包括协议正文及所有蓝马已经发布的或将来可能发布的各类规则。所有规则为本协议不可分割的组成部分，与协议正文具有同等法律效力。除另行明确声明外，任何蓝马及其关联公司提供的服务（以下称为“蓝马服务”）均受本协议约束。
          </p>
          <p>
            2．您应当在使用蓝马服务之前认真阅读全部协议内容，对于协议中以加粗字体显示的内容，您应重点阅读。如您对协议有任何疑问的，应向蓝马咨询。但无论您事实上在使用蓝马服务之前是否认真阅读了本协议内容，只要您使用蓝马服务，则本协议即对您产生约束，届时您不应以未阅读本协议的内容或者未获得蓝马对您问询的解答等理由，主张本协议无效，或要求撤销本协议。
          </p>
          <p>
            3．您承诺接受并遵守本协议的约定。如果您不同意本协议的约定，您应立即停止注册程序或停止使用蓝马服务。
          </p>
          <p>
            4．蓝马有权根据需要不时地制订、修改本协议及/或各类规则，并以网站公示的方式进行公告，不再单独通知您。变更后的协议和规则一经在网站公布后，立即自动生效。如您不同意相关变更，应当立即停止使用蓝马服务。您继续使用蓝马服务的，即表示您接受经修订的协议和规则。
          </p>
        </div>
        <div class="card">
          <label> 二、注册</label>
          <div>
            <p>1．注册者资格</p>
            <p>
              您确认，在您完成注册程序或以其他蓝马允许的方式实际使用蓝马服务时，您应当是法人或其他具备民事权利能力和完全民事行为能力的组织。若您不具备前述主体资格，蓝马有权注销（永久冻结）您的蓝马账户。
            </p>
          </div>
          <div>
            <p>2．账户</p>
            <p>
              在您签署本协议，并完成全部注册程序后，您的蓝马会员管理账户正式生效，该会员管理账户将作为您申请使用的法人在蓝马的唯一管理账户。
            </p>
            <p>
              管理账户的使用与管理参照蓝马的《会员管理办法》。
            </p>
            <p>
              您应对您的管理账户和密码的安全的行为负责。除非有法律规定或司法裁定，且征得蓝马的同意，否则，管理账户和密码不得以任何方式转让、赠与或继承（与账户相关的财产权益除外）。如果发现任何人不当使用您的账户或有任何其他可能危及您的账户安全的情形时，您应当立即以有效方式通知蓝马，要求蓝马暂停相关服务。请您理解蓝马对您的请求采取行动需要合理时间，蓝马对在采取行动前已经产生的后果（包括但不限于您的任何损失）不承担任何责任。
            </p>
            <p>
              为方便您使用蓝马服务及航运订舱关联公司或其他组织的服务（以下称“其他服务”），您同意并授权蓝马将您在注册、使用蓝马服务过程中提供、形成的信息传递给向您提供其他服务的蓝马关联公司或其他组织，或从提供其他服务的蓝马供应商或其他组织获取您在注册、使用其他服务期间提供、形成的信息。
            </p>
          </div>
        </div>
        <div class="card">
          <p>3．会员</p>
          <p>
            在您按照注册页面提示填写信息、阅读并同意本协议且完成全部注册程序后，或以其他蓝马允许的方式实际使用蓝马服务时，您即成为蓝马会员（以下简称“会员”）。
          </p>
          <p>
            初始会员默认为普通会员，普通会员的付款方式都为付款买单，付款买单客户的付款时间为平台开票后三日内，信用卡客户必须在付款时间内及时完成付款。您应当了解，蓝马仅仅是作为为您提供服务的供应商的代理人的身份向您收取费用。
          </p>
          <p>
            在注册时，您应当按照法律法规要求，或注册页面的提示准确提供、并及时更新您的资料，以使之真实、及时、完整和准确。如有合理理由怀疑您提供的资料错误、不实、过时或不完整的，蓝马有权向您发出询问及/或要求改正的通知，并有权直接做出删除相应资料的处理，直至中止、终止对您提供部分或全部蓝马服务。蓝马对此不承担任何责任，您将承担因此产生的任何直接或间接支出。
          </p>
          <p>
            您应当准确填写并及时更新您提供的电子邮件地址、联系电话、联系地址、邮政编码等联系方式，以便蓝马与您进行有效联系，因通过这些联系方式无法与您取得联系，导致您在使用蓝马服务过程中产生任何损失或增加费用的，应由您完全承担。
          </p>
          <p>
            您在使用蓝马服务过程中，所产生的应纳税赋，以及一切硬件、软件、服务及其它方面的费用，均由您独自承担。
          </p>
        </div>
        <div class="card">
          <label> 三、蓝马服务</label>
         <div>
           <p>
             1．通过蓝马，会员可使用在线询价、在线订舱、在线查询、在线对账等蓝马提供的各项服务。会员在蓝马的使用权限，参照蓝马的《会员管理办法》。
           </p>
           <p>
             2．您于蓝马进行在线订舱交易时，需另行在线签订《蓝马订舱服务协议》（以下简称“《订舱服务协议》”），您完成在线阅读并点击同意后，即表明您签署了《订舱服务协议》，同意委托服务供应商为您代理货物出口订舱等事宜。如果您不同意签署《订舱服务协议》，则您的在线订舱交易将被终止。
           </p>
           <p>
             3．您了解并同意，蓝马有权应政府部门（包括司法及行政部门）的要求，向其提供您在蓝马填写的注册信息和交易纪录等必要信息。如您涉嫌侵犯他人相关权利，则蓝马亦有权在初步判断涉嫌侵权行为存在的情况下，向权利人提供您必要的身份信息。
           </p>
         </div>
        </div>
        <div class="card">
          <label> 四、蓝马服务使用规范</label>
          <div>
            <p>
              1．在蓝马上使用航运订舱服务过程中，您承诺遵守以下约定：
            </p>
            <div>
              <p>
                （1）在蓝马上进行的交易过程中，遵守诚实信用原则，不扰乱蓝马的正常交易秩序。
              </p>
              <p>
                （2）您使用蓝马的在线订舱交易服务，即表示您同意蓝马作为您物色交易对象的平台，以及就订舱服务的交易进行协商、获取各类与交易相关的服务平台。
              </p>
              <p>
                （3）当您在线填写下单信息时，必须提供真实、正确的货物资料（名称、标志、包数或件数、重量、装卸港口等），对于填写错误而导致的损失和责任，由您自行承担。
              </p>
              <p>
                （4）您应保证委托通过蓝马订舱的货物符合中国、运输沿途及目的国各相关国家法律法规条例等规定，不存在误报、错报或漏报的情形。
              </p>
              <p>
                （5）您应如实申报货物名称及其他信息，并承担未如实申报的全部责任。如果托运货物是危险品，您应该于下单页面注明危险货物，并将中文品名、等级、UNNO.等信息向蓝马申报，并依据相关规定适当包装。无论您是否进行了危险品申报，对由于危险货物所造成的一切损失和责任，均由您承担。
              </p>
              <p>
                （6）应交易需要，您必须提供正确的装箱情况，如有更改，应在货物装船壹天前出具书面更改单，注明日期、经办人签字加盖甲方印章并支付因变更订舱事项所引起的各项费用。因您提供的有关资料及单证有误等原因造成的一切后果，由您自行负责。
              </p>
              <p>
                （7）您通过蓝马进行订舱交易，即表明您承诺授权蓝马为您的提单收取代理人向为您提供实际服务的供应商领取提单，您只与蓝马直接发生提单的交付与受领关系。您须了解并明确，蓝马是受服务供应商委托向您发放提单，如果按照《订舱服务协议》以及其他您和供应商之间的协议规定您无权取得提单，那么同样你无权从蓝马处取得提单。
              </p>
              <p>
                （8）若您通过蓝马订舱拿到提单后需要改单的，或者有电放需求的您可以与为您提供实际服务供应商沟通，由服务供应商为您解决问题。若服务供应商不同意您的请求，由蓝马为您代为处理该事宜，您须支付相关费用给下单平台。
              </p>
              <p>
                （9）为了维护您的利益，蓝马无需您的特别授权即可代替您先行垫付运费和其他费用，包括目的港可能产生的相关费用。
              </p>
              <p>
                （10）您须在服务供应商记录或上传费用账单到蓝马后的一天内，进入平台结算中心核对账单，核对无误后点击“确认”，有误则点击“否决”，待供应商重新审核账单做出解释或修改后再予以核对确认账单。
              </p>
              <p>
                （11）您通过蓝马向服务供应商订舱，由蓝马作为供应商的代理人向您收取订舱费、运费等相关费用，并由蓝马向您开具货运代理专用发票。尽管如此，并不表明蓝马具有货运代理人的身份，蓝马承担的仍是居间人的角色。
              </p>
              <p>
                （12）您通过蓝马进行在线订舱，应当按蓝马规定，及时向蓝马支付订舱费、运输费以及其他蓝马代为收取的各项费用。您要保证您支付给蓝马的费用是您和服务供应商达成的最终交易价格，蓝马运价中心显示的价格只作为您和供应商议价的参考而不作为结算依据。
              </p>
              <p>
                (13)蓝马只负责代理服务供应商收取运费，如果您和服务供应商发生费用争议，蓝马可以进行协调，但最终以您和供应商确认的金额收款。您在平台上确认服务供应商的账单，就表示您同意向蓝马支付该笔费用，服务供应商会在您确认费用后将提单交付给蓝马，如您不确认费用，蓝马没有交付提单的义务。
              </p>
              <p>
                （14）如果您和服务供应商确认完账单后，服务供应商发现该笔订单有遗漏费用需要收取，可自行向您收取，如服务供应商需要平台代理收取，蓝马需得到您的费用确认和支付保证后再支付给服务供应商。如您发现服务供应商向您多收取了费用，而您已完成支付，则您需与服务供应商自行协商解决。
              </p>
            </div>
            <p>
              2．在使用蓝马的其他服务过程中，承诺遵守以下约定：
            </p>
            <div>
              <p>
                （1）在使用蓝马服务过程中实施的所有行为均须遵守国家法律、法规等规范性文件及蓝马各项规则的规定和要求，不违背社会公共利益或公共道德，不损害他人的合法权益，不违反本协议及相关规则。您如果违反前述承诺，产生任何法律后果的，您应以自己的名义独立承担所有的法律责任，并确保蓝马免于因此产生任何损失。
              </p>
              <p>
                （2）不发布涉嫌侵犯他人合法权益的服务信息，不发布违背社会公共利益或公共道德或蓝马认为不适合在蓝马的服务信息，不发布其它涉嫌违法或违反本协议及各类规则的信息。
              </p>
              <p>
                （3）不对蓝马上的任何数据作商业性利用，包括但不限于在未经蓝马事先书面同意的情况下，以复制、传播等任何方式使用蓝马上展示的资料。
              </p>
              <p>
                （4）不使用任何装置、软件或例行程序干预或试图干预蓝马的正常运作或正在蓝马上进行的任何交易、活动。您不得采取任何会导致不合理的庞大数据负载加诸蓝马网络设备的行动。
              </p>
            </div>
            <p>
              3．您了解并同意：
            </p>
            <div>
              <p>
                （1）蓝马仅仅是在费用收取方面受服务供应商的委托代收费用，在蓝马的交易过程中，蓝马并不具有服务供应商代理人的身份。
              </p>
              <p>
                （2）蓝马有权对您是否违反本协议承诺做出单方认定，并根据单方认定结果适用规则予以处理或终止向您提供服务，且无须征得您的同意或提前通知予您。
              </p>
              <p>
                （3）经国家行政或司法机关的生效法律文书确认您存在违法行为，或者蓝马根据自身的判断，认为您的行为涉嫌违反本协议和/或规则的条款或涉嫌违反法律法规的规定的，则蓝马有权在蓝马上公示您的该等涉嫌违法或违约行为及蓝马已对您采取的措施。
              </p>
              <p>
                （4）对于您在蓝马上发布的涉嫌违法或涉嫌侵犯他人合法权利或违反本协议和/或规则的信息，蓝马有权不经通知您即予以删除，且按照规则的规定进行处罚。
              </p>
              <p>
                （5）对于您在蓝马上实施的行为，包括您未在蓝马上实施但已经对蓝马及其用户产生影响的行为，蓝马有权单方认定您行为的性质及是否构成对本协议和/或规则的违反，并据此作出相应处罚。您应自行保存与您行为有关的全部证据，并应对无法提供充份证据而承担不利后果。
              </p>
              <p>
                （6）对于您涉嫌违反承诺的行为对任意第三方造成损害的，您均应当以自己的名义独立承担所有的法律责任，并应确保蓝马免于因此产生损失或增加费用。 </p>
              <p>
                （7）如您涉嫌违反有关法律或者本协议之规定，使蓝马遭受任何损失，或受到任何第三方的索赔，或受到任何行政管理部门的处罚，您应当赔偿蓝马订舱因此造成的损失及（或）发生的费用，包括合理的律师费用。
              </p>
            </div>
          </div>
        </div>

        <div class="card">
          <label> 五、特别授权</label>
          <div>
            <p>
              您完全理解并不可撤销地授予订舱公司及其关联公司下列权利：
            </p>
            <div>
              <p>
                1．一旦您向蓝马及（或）订舱公司关联公司作出任何形式的承诺，且相关公司已确认您违反了该承诺，则蓝马有权立即按您的承诺或协议约定的方式对您的账户采取限制措施，包括中止或终止向您提供服务，并公示相关公司确认的您的违约情况。您了解并同意，蓝马无须就相关确认与您核对事实，或另行征得您的同意，且蓝马无须就此限制措施或公示行为向您承担任何的责任。
              </p>
              <p>
                2．一旦您违反本协议，或与蓝马签订的其他协议的约定，蓝马有权以任何方式通知蓝马关联公司，要求其对您的权益采取限制措施，包括但不限于要求关联公司中止、终止对您提供部分或全部服务，且在其经营或实际控制的任何网站公示您的违约情况。
              </p>

            </div>
          </div>
        </div>
        <div class="card">
          <label> 六、责任范围和责任限制</label>
          <div>
            <p>
              1．蓝马提供的内容与服务系"按原始数据"提供，并无附带任何形式的明示或暗示的保证。在任何情况下，对于因使用这些资料或无法使用这些资料而导致的任何损害赔偿（包括但不限于利润损失、业务中断及信息损失等方面的损失赔偿），蓝马均无须承担法律责任,即使蓝马曾经被告知有可能出现该等损害赔偿。
            </p>
            <p>
              2．蓝马负责根据您的订单内容协助您与服务供应商办理订舱及其他服务，蓝马应认真履行职责，为您提供优质服务，尽力解决您在使用蓝马及在线交易过程中遇到的各类问题。若非因蓝马原因造成的您的货物不能订舱、出运迟延等，蓝马不负责任，一切损失和责任由您自行承担。
            </p>
            <p>
              3.蓝马不涉及用户间因交易而产生的法律关系及法律纠纷，不会且不能牵涉进交易各方的交易当中。倘若您与服务供应商发生争议，您免除蓝马在因该等争议而引起的，或在任何方面与该等争议有关的不同种类和性质的任何(实际和后果性的)权利主张、要求和损害赔偿等方面的责任。
            </p>
            <p>
              4．您了解并同意，蓝马不对因下述任一情况而导致您的任何损害赔偿承担责任，包括但不限于利润、商誉、使用、数据等方面的损失或其它无形损失的损害赔偿(无论蓝马是否已被告知该等损害赔偿的可能性)：
            </p>
            <div>
              <p>
                （1）使用或未能使用蓝马服务。
              </p>
              <p>
                （2）第三方未经批准的使用您的账户或更改您的数据。
              </p>
              <p>
                （3）通过蓝马服务获取任何数据、信息或进行交易等行为或替代行为产生的费用及损失。
              </p>
              <p>
                （4）您对蓝马服务的误解。
              </p>
              <p>
                （5）任何非因蓝马原因而引起的与蓝马服务有关的其它损失。
              </p>
            </div>
            <p>
              5．不论在何种情况下，蓝马均不对由于信息网络正常的设备维护，信息网络连接故障，电脑、通讯或其他系统的故障，电力故障，罢工，劳动争议，暴乱，起义，骚乱，生产力或生产资料不足，火灾，洪水，风暴，爆炸，战争，政府行为，司法行政机关的命令而造成的不能服务或延迟服务承担责任。

            </p>
          </div>
        </div>
        <div class="card">
          <label> 七、协议终止</label>
          <div>
            <p>
              1．您同意，蓝马有权自行全权决定以任何理由不经事先通知的中止、终止向您提供部分或全部蓝马服务，暂时冻结或永久冻结（注销）您的账户，且无须为此向您或任何第三方承担任何责任。
            </p>
            <p>
              2．出现以下情况时，蓝马有权直接以注销账户的方式终止本协议:
            </p>
            <div>
              <p>
                （1）蓝马终止向您提供服务后，您涉嫌再一次直接或间接或以他人名义注册为蓝马用户的。
              </p>
              <p>
                （2）您提供的电子邮箱不存在或无法接收电子邮件，且没有其他方式可以与您进行联系，或蓝马以其它联系方式通知您更改电子邮件信息，而您在蓝马通知后三个工作日内仍未更改为有效的电子邮箱的。
              </p>
              <p>
                （3）您注册信息中的主要内容不真实或不准确或不及时或不完整。
              </p>
              <p>
                （4）本协议（含规则）变更时，您明示并通知蓝马不愿接受新的服务协议的；
              </p>
              <p>
                （5）其它蓝马认为应当终止服务的情况。
              </p>
            </div>

            <p>
              3．您有权向蓝马要求注销您的账户，经蓝马审核同意的，蓝马将注销（永久冻结）您的账户，届时，您与蓝马基于本协议的合同关系即终止。您的账户被注销（永久冻结）后，蓝马没有义务为您保留或向您披露您账户中的任何信息，也没有义务向您或第三方转发任何您未曾阅读或发送过的信息。
            </p>
            <p>
              4．您同意，您与蓝马的合同关系终止后，蓝马仍享有下列权利：
            </p>
            <div>
              <p>
                （1）继续保存您的注册信息及您使用蓝马服务期间的所有交易信息。
              </p>
              <p>
                （2）您在使用蓝马服务期间存在违法行为或违反本协议和/或规则的行为的，蓝马仍可依据本协议向您主张权利。
              </p>
            </div>
            <p>
              5．蓝马中止或终止向您提供蓝马服务后，对于您在服务中止或终止之前的交易行为依下列原则处理，您应独力处理并完全承担进行以下处理所产生的任何争议、损失或增加的任何费用，并应确保蓝马免于因此产生任何损失或承担任何费用：

            </p>
            <div>
              <p>
                （1）您在服务中止或终止之前已经在蓝马发布的资讯信息，蓝马有权在中止或终止服务的同时进行删除。
              </p>
              <p>
                （2）您在服务中止或终止之前提交的交易订单，但订单尚未实际履行的，蓝马有权取消该订单。
              </p>
              <p>
                （3）您在服务中止或终止之前已经提交的交易订单，已实际履行的，蓝马有权在中止或终止服务的同时保留订单，并向您收取订单的交易费用。
              </p>
            </div>
          </div>
        </div>
        <div class="card">
          <label> 八、隐私权政策</label>
          <div>
            <p>
              蓝马将不定时公布、修订隐私权政策，隐私权政策构成本协议的有效组成部分。
            </p>
          </div>
        </div>
        <div class="card">
          <label> 九、法律适用、管辖与其他</label>
          <div>
            <p>
              1．本协议之效力、解释、变更、执行与争议解决均适用中华人民共和国法律，如无相关法律规定的，则应参照通用国际商业惯例和（或）行业惯例。
            </p>
            <p>
              2．因本协议产生之争议，应依照中华人民共和国法律予以处理，向深圳市蓝湾物流网络科技有限公司所在地有管辖权的法院提起诉讼。
            </p>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <section id="cent" :updateStatusData="updateStatusData">
      <div class="box">
        <div class="center"  v-loading="loading" :element-loading-text="languageData.login.loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255,255,255,0.7)">
          <div class="clearfix topTextBox">
            <div class="topText clearfix" style="float: left">
              <div class="imgBoxs left">
                 <img src="../../../static/img/icon/logo180.png" />
              </div>
              <div class="left">
                <span class="topCon">注册蓝马账号</span>
              </div>
            </div>
            <div class="topText"  style="float: right;text-align: right">
              <span class="topCon">已有账号？<span class="blu" @click="goPage('login')">去登陆</span></span>
            </div>
            <div class="cleae">
            </div>
          </div>
          <div class="faromBox" :code="code">
            <el-form label-position="right" label-width="100px" :model="formData" :rules="languageData.id=='Chinese'?rules:rules2" ref="formData">
              <el-form-item label="手机号：" prop="phone">
                <el-input  v-model="formData.phone" placeholder="请输入手机号" ></el-input>
              </el-form-item>
              <el-form-item label="密码：" prop="password">
                <el-input type="password" v-model="formData.password" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item label="确认密码：" prop="passwordCheck">
                <el-input type="password" v-model="formData.passwordCheck" placeholder="请再次输入密码"></el-input>
              </el-form-item>
              <el-form-item label="验证码：" prop="code">
                <el-input placeholder="请输入验证码" v-model="formData.code" class="code">
                  <template slot="append"   > <el-button type="" @click="getCode(formData.phone)" :disabled="codeText !='获取验证码'"> {{codeText}}</el-button> </template>
                </el-input>
              </el-form-item>
              <el-form-item label="联系人：">
                <el-input v-model="formData.contactName"  placeholder="请输入联系人姓名"></el-input>
              </el-form-item>
              <el-form-item label="公司名称：">
                <el-input v-model="formData.companyName" placeholder="请输入公司名称"></el-input>
              </el-form-item>
              <el-form-item >
                <div>
                  <el-button type="primary" :disabled="!checked" class="submit" v-on:click="submitForm('formData')" >注册</el-button>
                </div>
                <div>
                  <el-checkbox v-model="checked">同意并愿意遵守</el-checkbox> <span class="sev" @click="dialogVisible=!dialogVisible">《蓝马用户注册协议》</span>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </section>
    <section id="footer" :user="user"> </section>
  </div>
</template>
<style scoped>
  .recev{font-size: 14px;color: #999}
  .recev p{font-size: 12px;color: #999}
  .card{margin-top: 20px}
  .recev label{font-size: 14px;color: #000;font-weight: bold}
  .code{cursor: pointer}
  .submit {width: 100%;margin-top:40px ;margin-bottom: 10px}
  .faromBox{ width:400px;margin: auto; }
  .sev{margin-left: 5px;color:#409eff;font-size: 14px;cursor: pointer;text-decoration: underline;  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif}
   #cent{height: 860px;position: relative;width: 100%;overflow: hidden}
  .box{width: 1000px;height: 620px;position: absolute;top: 50%;left: 50%;}
  .center{width: 880px;height: 500px;position: absolute;top: -50%;left: -50%;background-color: #fff;padding: 60px;box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
  .topTextBox{ position: absolute;top: -70px;left: 0px;width: 100%}
  .topText{text-align: -moz-left;color: #333333;font-size:24px;line-height: 50px;font-size: 20px;width: 50%}
  .topCon{font-size: 20px;}
  .blu{ color: #0062a2;cursor: pointer}
  .imgBoxs{width: 100px;margin-right: 20px}
  .imgBoxs img{max-width: 100%}
  @keyframes errorName {
    form{top: 0px ; left: -15px;opacity: 0}
    to{ top: -18px;left: -15px ;opacity: 1; display: block}
  }
  /**英文样式覆盖**/
  .English .logoText{font-size: 16px;}
  .English .logo{font-size: 38px;}
</style>
<script>
  import HeaderPublc from '@/components/public/herder.vue'
  import Public from '@/vuex/public'
  import loginImg from '../../../static/img/icon/logo180.png'
  import { mapState, mapActions } from 'vuex'
  export default {
    name: 'my-login',
    data () {
      var indeofCity = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请确认密码'));
        }

        setTimeout(() => {
          if (this.formData.password != value) {
            return callback(new Error('两次密码不一样'));
          }else {
            callback();
          }
        }, 300);
      };
      var checkPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('输入手机号码'));
        }


        if((this.checkPhon == value) && value){
          callback(new Error('该手机已注册！'));
        }else if(value){
          var url = Public.api + '/user/phoneIsExist'
          var  data = JSON.stringify(Public.publicLo.parmToken({phone:value}))

          this.$http.post(url, data, { emulateJSON: true }).then(function (res) {
            if(res.body.status !=0){
              callback(new Error('该手机已注册！'));
              this.checkPhon = value
            }else {
              callback();
            }
          })
        }


      };
      return {
        checkPhon:'',
        dialogVisible:false,
        checked:'',
        codeText:'获取验证码',
        t:'',
        loading:false,
        formData: {
          contactName: '', // 联系人姓名
          companyName:'',//公司名
          password: '', // 密码
          passwordCheck:'',
          phone:'',//手机
          code:'',//验证码
        },
        rules: {
          phone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { validator: checkPhone, trigger: 'blur' },

          ],
          code: [
            { required: true, message: '请输入验证码', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入登陆密码', trigger: 'blur' },
          ],
          passwordCheck: [
            { required: true, message:'请确认新密码', trigger: 'blur' },
            { validator: indeofCity, trigger: 'blur' },
          ]
        },
        poneErr:'',
        rules2: {
          phone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { validator: indeofCity, trigger: 'blur' },
          ],
          code: [
            { required: true, message: '请输入验证码', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入登陆密码', trigger: 'blur' },
          ],
          passwordCheck: [
            { required: true, message:'请确认新密码', trigger: 'blur' },
            { validator: indeofCity, trigger: 'blur' },
          ]
        },
      }
    },
    methods: {
      ...mapActions({
        lognPost: 'loginFn',
        sendAuth: 'sendAuth',
        register: 'register',
        phoneIsExist:'phoneIsExist'
      }),
      goBack(){
         //this.$router.back()
         this.$router.push({name:"update"})
      },
      login () {
        if (this.formData.phone && this.formData.password) {
          var parm = {
            userName:this.formData.phone,
            password:this.formData.password
          }
          this.lognPost(parm)
        }
//        this.$router.push({ name: 'map' })
      },
      // 校验手机号
      checkPhoneFn(phone){

        if(phone !=parseInt(phone)){

          return
        }
        if(phone.length<8){
          return
        }

        var parm = {
          phone:phone
        }

        this.phoneIsExist(parm)
      },
      // 登陆成功
      userFn (res) {
        // 登陆不成功 直接跳出 给出提示
        if (res.status != 0) {
         // this.error = true
         //  var that = this
         return
        }
        // 登陆成功之后 保存token 和用户信息 到本地
        res.data.userName = this.formData.phone
        var users = JSON.stringify(res.data)
        var token = res.data.token
        Public.publicLo.sessionStorageSav('token', token)
        Public.publicLo.sessionStorageSav('user', users)
        // 查看又没记住密码
        // this.goBack()
        // 跳转到 首页


        if(this.formData.contactName && this.formData.companyName){
          this.$router.push({ name: 'index' })
        }else {

          this.$router.push({ name: 'update' })
        }
      },
      //页面跳转
      goPage (name,a) {
        if(a){
          window.open(a)
        }
        this.$router.push({name: name})
      },
      // 获取验证码
      getCode(phone){
        if(!phone){
          this.openError('请输入手机号！')
          return
        }
        if(this.poneErr){
          this.openError('该手机号已注册！')
          return
        }
        var parm = {
          phone:phone+''
        }
        // 发送验证
        this.sendAuth(parm)
        this.timeOutFn()
      },
      //注册提交
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {

            var parm = {
              contactName: this.formData.contactName, // 联系人姓名
              password: this.formData.password, // 密码
              companyName:this.formData.companyName,//公司名
              phone:this.formData.phone,//手机
              code:this.formData.code,//验证码
            }
            this.$store.commit('commitLoading', {loading:true,text:'正在注册，请稍后....'})
            this.register(parm)
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      listStatus (res) {
      var err = ""
      var success = ""
        this.$store.commit('commitLoading', {loading:false,text:'正在注册，请稍后....'})

        if(res.code == "phoneIsExist"){
          this.poneErr = ""
          switch (res.status){
            case 0:
              success =  this.languageData.id=='Chinese'? '手机号可用': ' success'

              // setTimeout(function () {
              //   if(!that && !that._isDestroyed){ //_isDestroyed 组件是否被销毁
              //     console.log('组件销毁')
              //     return;
              //   }
              // },2000)
              break
            case 106:
              phone = '验证码过期'
              break
            case 107:
              err = '验证码不正确'
              break
            case 108:
              err = '手机号不正确'
              break
            case 109:
              err = '手机号已注册'
              this.poneErr = this.formData.phone
              break
            default:
              err = '异常'
              break
          }
        }else {
          switch (res.status){
            case 0:
              success =  this.languageData.id=='Chinese'? '注册成功': 'register success'
              var  that = this
              // setTimeout(function () {
              //   if(!that && !that._isDestroyed){ //_isDestroyed 组件是否被销毁
              //     console.log('组件销毁')
              //     return;
              //   }
              // },2000)
              break
            case 106:
              err = '验证码过期'
              break
            case 107:
              err = '验证码不正确'
              break
            case 108:
              err = '手机号不正确'
              break
            case 109:
              err = '手机号已注册'
              break
            default:
              err = '异常'
              break
          }
          if(success){
            this.openSuccess(success)
            this.login()
          }
        }
        if (err) {
          this.openError(err)
        }

        // 清空 vuex 中的本次记录，以免被下次操作状态造成混淆
        this.$store.commit('updateStatusTo', {body: null})
      },
      // 到计时
      timeOutFn(){
        var index = 0
        var titme = 60
        var that = this

        this.t = setInterval(function () {
          if(!that && !that._isDestroyed){ //_isDestroyed 组件是否被销毁

            return;
          }
          if(index >= titme){
            that.codeText= '获取验证码'
            clearInterval(that.t)
          }else {
            that.codeText= (titme-index)+'秒后获取'
            index++
          }
        },1000)
      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message({
          message: text,
          type: 'error'
        })

      },
    },
    computed: {
      languageData: function () {
        var parm = this.language
        if (parm) {
          if (parm.check == 'Chinese') {
            parm = parm.Chinese
          }
          if (parm.check == 'English') {
            parm = parm.English
//            dom.style = 'width:620px'
          }
//          // 替换 其他交互数据
//          this.updateDate(parm)
        }
        return parm
      },
      user: function () {
        var parm = this.userData
        var res = false
        if (parm) {
          this.userFn(parm)
          res = true
        }
        return res
      },
      code: function () {
        var parm = this.codeData

        if (parm) {

          if(parm.body.status == -1 ){
            this.openSuccess('验证码发送成功！')
          }
          if(parm.body.status == 109){
            this.openError('该手机已注册！')
          }
          this.$store.commit('commitSendAuth', null)
        }
        return 1
      },
      updateStatusData: function () {
        var parm = this.updateStatus
        if (parm) {
          this.listStatus(parm)
        }
        return 1
      },
      ...mapState([
        'language',
        'userData',
        'codeData',
        "updateStatus"
      ])
    },
    mounted () {
      // var parm = {
      //   userName:18312466920,
      //   password:123456
      // }
      // this.lognPost(parm)

    },
    components: {
       HeaderPublc: HeaderPublc
    }
  }
</script>

